<style>
.webuploader-container {
  position: relative;
}
.webuploader-element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #fff;
  padding: 5px 10px;
  color: #333;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.webuploader-pick-hover {
  background: #e6e6e6;
  border-color: #adadad;
}

.webuploader-pick-disable {
  opacity: 0.6;
  pointer-events:none;
}

.balloon-uploader {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.balloon-uploader-heading {
  background-color: #f5f5f5;
  color: #333;
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  display: none;
}

.balloon-uploader-footer {
  background-color: #f5f5f5;
  color: #333;
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  text-align: right;
}

.balloon-filelist {
  width: 100%;
}

.balloon-filelist-heading {
  padding: 8px 10px;
  font-weight: bold;
  border-bottom: 2px solid #ddd;
}

.balloon-uploader-body {
  position: relative;

}

.balloon-filelist .file-name,
.balloon-filelist .file-size,
.balloon-filelist .file-status,
.balloon-filelist .file-manage {
  position: relative;
  z-index: 1;
}

.balloon-filelist .file-name {
  display: inline-block;
  width: 40%;
}

.balloon-filelist .file-size {
  display: inline-block;
  width: 20%;
}

.balloon-filelist .file-status {
  display: inline-block;
  width: 18%;
}
.balloon-filelist .file-manage {
  display: inline-block;
  width: 20%;
  z-index: 9999;
  position: absolute;
}

.balloon-filelist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 100px;
  max-height: 300px;
  overflow-y: scroll;
}


.balloon-filelist ul li {
  position: relative;
  border-bottom: 1px solid #ddd;
  padding: 8px 10px;
}

.balloon-dnd {
  visibility: hidden;
}

.balloon-uploader-none .balloon-uploader-footer,
.balloon-uploader-none .balloon-uploader-body {
  visibility: hidden;
}

.balloon-uploader-none .balloon-dnd {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  vertical-align: middle;
}

.balloon-nofile {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 100px;
  text-align: center;
  color: #999;
}

.balloon-uploader .file-pick-btn {
  display: inline-block;
}

.balloon-uploader .start-upload-btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #5bc0de;
  padding: 5px 10px;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #46b8da;
  overflow: hidden;
}

.balloon-uploader .start-upload-btn:hover {
  background: #31b0d5;
  border-color: #269abc;
}

.balloon-filelist .file-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: -40px;
  bottom: 0;
}

.balloon-filelist .file-progress-bar {
  background: rgb(219,242,215);
  background: rgba(59, 181, 33, 0.18);
  float: left;
  height: 100%;
}

</style>

<div id="media-choosers">

  <div class="file-chooser" id="video-chooser" style="display:none;"
    data-targetType="{{targetType}}"
    data-targetId="{{targetId}}"
  >
    <div class="file-chooser-bar" style="display:none;">
      <span data-role="placeholder"></span>
      <button class="btn btn-link btn-sm" type="button" data-role="trigger"><i class="glyphicon glyphicon-edit"></i> 编辑</button>
      <div class="alert alert-warning" data-role="waiting-tip" style="display:none;">正在转换视频格式，转换需要一定的时间，期间将不能播放该视频。<br />转换完成后将以站内消息通知您。</div>
    </div>

    <div class="file-chooser-main">
      <ul class="nav nav-pills nav-pills-sm mbs file-chooser-tabs">
        <li><a class="file-chooser-uploader-tab" href="#video-chooser-upload-pane" data-toggle="tab">上传视频</a></li>
        <li>
          <a href="#video-chooser-disk-pane" data-toggle="tab">
            从资料库中选择
          </a>
        </li>

        <li>
          <a href="#video-chooser-course-file" data-toggle="tab">
            从课程文件中选择
          </a>
        </li>

        <li><a href="#video-chooser-import-pane" data-toggle="tab">导入网络视频</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="video-chooser-upload-pane">

          <div class="file-chooser-uploader">
            {% include 'TopxiaWebBundle:CloudFile:video-quality-switcher.html.twig' %}

            {% set token = uploader_token(targetType, targetId, 'private') %}
            <div class="balloon-uploader"
              data-init-url="{{ path('uploader_init', {token:token}) }}"
              data-finish-url="{{ path('uploader_finished', {token:token}) }}"
              data-upload-auth-url = "{{ path('uploader_auth', {token:token}) }}"
              data-accept="{{ uploader_accept(targetType, 'video')|json_encode }}"
              data-process="{{ uploader_process(targetType) }}"
            ></div>


            <div class="alert alert-info">
              <ul>
                {% if storageSetting.upload_mode == 'cloud' %}
                  <li>支持<strong>mp4, avi, flv, f4v, wmv, mov, rmvb, mkv, m4v</strong>格式的视频文件上传，文件大小不能超过<strong>2 GB</strong>。</li>
                  <li>支持<strong>断点续传</strong>（仅支持HTML5浏览器）。</li>
                  <li>视频将上传到<strong>云视频服务器</strong>，上传之后会对视频进行格式转换，转换过程需要一定的时间，在这个过程中视频将无法播放。</li>
                {% else %}
                  <li>支持<strong>mp4</strong>格式的视频文件上传，文件大小不能超过<strong>{{ upload_max_filesize() }} </strong>。MP4文件的视频编码格式，请使用AVC(H264)编码，否则浏览器无法播放。</li>
                  <li>
                    视频将上传到<strong>网站服务器</strong>。如需使用{{ 'EduSoho'|copyright_less }}云视频,点击<a href="http://open.edusoho.com/show/cloud/video" target="_blank">这里</a>了解详情,{{ 'EduSoho'|copyright_less }}云视频将为您提供稳定、安全、经济、便捷的视频托管服务以及优质的视频播放体验。
                  </li>
                {% endif %}
              </ul>
            </div>

          </div>

        </div>
        <div class="tab-pane" id="video-chooser-disk-pane">
            <div id="file-browser-video" data-role="file-browser"
            data-base-url="{{ path('uploadfile_browser', {type:'video'}) }}"
            data-default-url="{{ path('uploadfile_browser', {type:'video', source:'upload'}) }}"
            data-my-sharing-contacts-url="{{ path('material_lib_my_sharing_contacts') }}"
            data-empty="暂无视频文件，请先上传。">
            	<div class="file-browser-list-container"></div>
            </div>
        </div>

        <div class="tab-pane" id="video-chooser-course-file">
            <div id="file-browser-video" data-role="course-file-browser"
            data-url="{{ path('course_manage_material_browser', {courseId:targetId, type:'video'}) }}"
            data-empty="暂无视频文件，请先上传。">
            </div>
        </div>

        <div class="tab-pane" id="video-chooser-import-pane">
          <div class="input-group">
            <input class="form-control" type="text" placeholder="支持优酷、土豆、腾讯、网易公开课的视频页面地址导入" data-role="import-url" >
            <span class="input-group-btn">
              <button type="button" class="btn btn-default" data-role="import" data-url="{{ path('course_manage_media_import', {id:course.id}) }}" data-loading-text="正在导入，请稍等">导入</button>
            </span>
          </div>
          <strong class="text-danger">* 腾讯和网易的视频不支持手机端播放</strong>
        </div>
      </div>
    </div>

  </div>


  <div class="file-chooser" id="audio-chooser" style="display:none;"
      data-targetType="{{targetType}}"
      data-targetId="{{targetId}}"
  >
    <div class="file-chooser-bar"  style="display:none;">
      <span data-role="placeholder"></span>
      <button class="btn btn-link btn-sm" type="button" data-role="trigger"><i class="glyphicon glyphicon-edit"></i> 编辑</button>
    </div>

    <div class="file-chooser-main">
      <ul class="nav nav-pills nav-pills-sm mbs file-chooser-tabs">
        <li><a class="file-chooser-uploader-tab" href="#audio-chooser-upload-pane" data-toggle="tab">上传音频</a></li>
        <li><a href="#audio-chooser-disk-pane" data-toggle="tab">
              从资料库中选择
        </a></li>

        <li>
          <a href="#audio-chooser-course-file" data-toggle="tab">
            从课程文件中选择
          </a>
        </li>

      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="audio-chooser-upload-pane">

          <div class="file-chooser-uploader">
            {% set token = uploader_token(targetType, targetId, 'private') %}
            <div class="balloon-uploader"
              data-init-url="{{ path('uploader_init', {token:token}) }}"
              data-finish-url="{{ path('uploader_finished', {token:token}) }}"
              data-upload-auth-url = "{{ path('uploader_auth', {token:token}) }}"
              data-accept="{{ uploader_accept(targetType, 'audio')|json_encode }}"
              data-process="{{ uploader_process(targetType) }}"
            >
            </div>

            <div class="alert alert-info">
              <ul>
                <li>支持<strong>mp3</strong>格式的音频文件上传，且文件大小不能超过<strong>
                {% if storageSetting.upload_mode == 'cloud' %}
                  500M
                {% else %}
                  {{ upload_max_filesize() }}
                {% endif %}
                </strong>。</li>
                {% if storageSetting.upload_mode == 'cloud' %}
                  <li>支持<strong>断点续传</strong>（仅支持HTML5浏览器）。</li>
                  <li>音频将上传到<strong>云服务器</strong></li>
                {% else %}
                  <li>
                    音频将上传到<strong>网站服务器</strong>，{{ '如需使用EduSoho云视频,'|copyright_less}}点击<a href="http://open.edusoho.com/show/cloud/video" target="_blank">这里</a>了解详情。
                  </li>
                {% endif %}
              </ul>
            </div>
          </div>

        </div>
        <div class="tab-pane" id="audio-chooser-disk-pane">
          <div id="file-browser-audio" data-role="file-browser"
          		data-base-url="{{ path('uploadfile_browser', {type:'audio'}) }}"
            data-default-url="{{ path('uploadfile_browser', {type:'audio', source:'upload'}) }}"
            data-my-sharing-contacts-url="{{ path('material_lib_my_sharing_contacts') }}"
            data-empty="暂无音频文件，请先上传。">
          		<div class="file-browser-list-container"></div>
          </div>
        </div>

        <div class="tab-pane" id="audio-chooser-course-file">
          <div id="file-browser-audio" data-role="course-file-browser"
          data-url="{{ path('course_manage_material_browser', {courseId:targetId, type:'audio'}) }}" data-empty="暂无音频文件，请先上传。"></div>
        </div>

      </div>
    </div>

  </div>




  <div class="file-chooser" id="ppt-chooser" style="display:none;"
    data-params-url="{{ path('uploadfile_params', {storage:storageSetting.upload_mode, targetType:targetType, targetId:targetId, convertor:'ppt', lazyConvert:1}) }}"
    data-targetType="{{targetType}}"
    data-targetId="{{targetId}}"
  >
    <div class="file-chooser-bar"  style="display:none;">
      <span data-role="placeholder"></span>
      <button class="btn btn-link btn-sm" type="button" data-role="trigger"><i class="glyphicon glyphicon-edit"></i> 编辑</button>
    </div>

    <div class="file-chooser-main">
      <ul class="nav nav-pills nav-pills-sm mbs file-chooser-tabs">
        <li><a class="file-chooser-uploader-tab" href="#ppt-chooser-upload-pane" data-toggle="tab">上传PPT</a></li>
        <li><a href="#ppt-chooser-disk-pane" data-toggle="tab">
              从资料库中选择
        </a></li>

         <li>
          <a href="#ppt-chooser-course-file" data-toggle="tab">
            从课程文件中选择
          </a>
        </li>

      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="ppt-chooser-upload-pane">

          <div class="file-chooser-uploader">
            {% set token = uploader_token(targetType, targetId, 'private') %}
            <div class="balloon-uploader"
              data-init-url="{{ path('uploader_init', {token:token}) }}"
              data-finish-url="{{ path('uploader_finished', {token:token}) }}"
              data-upload-auth-url = "{{ path('uploader_auth', {token:token}) }}"
              data-accept="{{ uploader_accept(targetType, 'ppt')|json_encode }}"
              data-process="{{ uploader_process(targetType) }}"
            >
            </div>

            <div class="alert alert-info">
              <ul>
                <li>支持<strong>ppt, pptx</strong>格式的PPT文件上传，且文件大小不能超过<strong>100 MB</strong>。</li>
                <li>PPT将上传到<strong>云服务器</strong></li>
              </ul>
            </div>
          </div>

        </div>
        <div class="tab-pane" id="ppt-chooser-disk-pane">
          <div id="file-browser-ppt" data-role="file-browser"
          		data-base-url="{{ path('uploadfile_browser', {type:'ppt'}) }}"
            data-default-url="{{ path('uploadfile_browser', {type:'ppt', source:'upload'}) }}"
            data-my-sharing-contacts-url="{{ path('material_lib_my_sharing_contacts') }}"
          		data-empty="暂无PPT文件，请先上传。">
          	<div class="file-browser-list-container"></div>
          </div>
        </div>

        <div class="tab-pane" id="ppt-chooser-course-file">
            <div id="file-browser-ppt" data-role="course-file-browser"
            data-url="{{ path('course_manage_material_browser', {courseId:targetId, type:'ppt'}) }}" data-empty="暂无PPT文件，请先上传。"></div>
        </div>

      </div>
    </div>

  </div>



 <div class="file-chooser" id="document-chooser" style="display:none;"
    data-params-url="{{ path('uploadfile_params', {storage:storageSetting.upload_mode, targetType:targetType, targetId:targetId, convertor:'document'}) }}"
    data-targetType="{{targetType}}"
    data-targetId="{{targetId}}"
  >
    <div class="file-chooser-bar"  style="display:none;">
      <span data-role="placeholder"></span>
      <button class="btn btn-link btn-sm" type="button" data-role="trigger"><i class="glyphicon glyphicon-edit"></i> 编辑</button>
    </div>

    <div class="file-chooser-main">
      <ul class="nav nav-pills nav-pills-sm mbs file-chooser-tabs">
        <li><a class="file-chooser-uploader-tab" href="#document-chooser-upload-pane" data-toggle="tab">上传文档</a></li>
        <li><a href="#document-chooser-disk-pane" data-toggle="tab">
              从资料库中选择
        </a></li>

         <li>
          <a href="#document-chooser-course-file" data-toggle="tab">
            从课程文件中选择
          </a>
        </li>

      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="document-chooser-upload-pane">

          <div class="file-chooser-uploader">

            {% set token = uploader_token(targetType, targetId, 'private') %}
            <div class="balloon-uploader"
              data-init-url="{{ path('uploader_init', {token:token}) }}"
              data-finish-url="{{ path('uploader_finished', {token:token}) }}"
              data-upload-auth-url = "{{ path('uploader_auth', {token:token}) }}"
              data-accept="{{ uploader_accept(targetType, 'cloud_document')|json_encode }}"
              data-process="{{ uploader_process(targetType) }}"></div>

            <div class="alert alert-info">
              <ul>
                <li>支持<strong>pdf,doc,docx</strong>格式的文档上传，且文件大小不能超过<strong>100 MB</strong>。</li>
                <li>文档将上传到<strong>云服务器</strong></li>
              </ul>
            </div>
          </div>

        </div>
        <div class="tab-pane" id="document-chooser-disk-pane">
          <div id="file-browser-document" data-role="file-browser"
              data-base-url="{{ path('uploadfile_browser', {type:'document'}) }}"
            data-default-url="{{ path('uploadfile_browser', {type:'document', source:'upload'}) }}"
            data-my-sharing-contacts-url="{{ path('material_lib_my_sharing_contacts') }}"
              data-empty="暂无文档，请先上传。">
            <div class="file-browser-list-container"></div>
          </div>
        </div>

        <div class="tab-pane" id="document-chooser-course-file">
            <div id="file-browser-document" data-role="course-file-browser"
            data-url="{{ path('course_manage_material_browser', {courseId:targetId, type:'document'}) }}" data-empty="暂无文档，请先上传。"></div>
        </div>

      </div>
    </div>

  </div>



   <div class="file-chooser" id="flash-chooser" style="display:none;"
    data-params-url="{{ path('uploadfile_params', {storage:storageSetting.upload_mode, targetType:targetType, targetId:targetId, convertor:''}) }}"
    data-targetType="{{targetType}}"
    data-targetId="{{targetId}}"
  >
    <div class="file-chooser-bar"  style="display:none;">
      <span data-role="placeholder"></span>
      <button class="btn btn-link btn-sm" type="button" data-role="trigger"><i class="glyphicon glyphicon-edit"></i> 编辑</button>
    </div>

    <div class="file-chooser-main">
      <ul class="nav nav-pills nav-pills-sm mbs file-chooser-tabs">
        <li><a class="file-chooser-uploader-tab" href="#flash-chooser-upload-pane" data-toggle="tab">上传Flash</a></li>
        <li><a href="#flash-chooser-disk-pane" data-toggle="tab">
              从资料库中选择
        </a></li>

         <li>
          <a href="#flash-chooser-course-file" data-toggle="tab">
            从课程文件中选择
          </a>
        </li>

      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="flash-chooser-upload-pane">

          <div class="file-chooser-uploader">
            {% set token = uploader_token(targetType, targetId, 'private') %}
            <div class="balloon-uploader"
              data-init-url="{{ path('uploader_init', {token:token}) }}"
              data-finish-url="{{ path('uploader_finished', {token:token}) }}"
              data-upload-auth-url = "{{ path('uploader_auth', {token:token}) }}"
              data-accept="{{ uploader_accept(targetType, 'flash')|json_encode }}"
              data-process="{{ uploader_process(targetType) }}"
            ></div>


            <div class="alert alert-info">
              <ul>
                <li>支持<strong>swf</strong>格式的文件上传，且文件大小不能超过<strong>100 MB</strong>。</li>
                <li>Flash将上传到<strong>云服务器</strong></li>
              </ul>
            </div>
          </div>

        </div>
        <div class="tab-pane" id="flash-chooser-disk-pane">
          <div id="file-browser-flash" data-role="file-browser"
              data-base-url="{{ path('uploadfile_browser', {type:'flash'}) }}"
            data-default-url="{{ path('uploadfile_browser', {type:'flash', source:'upload'}) }}"
            data-my-sharing-contacts-url="{{ path('material_lib_my_sharing_contacts') }}"
              data-empty="暂无Flash，请先上传。">
            <div class="file-browser-list-container"></div>
          </div>
        </div>

        <div class="tab-pane" id="flash-chooser-course-file">
            <div id="file-browser-flash" data-role="course-file-browser"
            data-url="{{ path('course_manage_material_browser', {courseId:targetId, type:'flash'}) }}" data-empty="暂无Flash，请先上传。"></div>
        </div>

      </div>
    </div>

  </div>


</div>
